.component {
  height: 71px;
  width: 80px;

  &.selectPoolBlockPlaceholder {
    border: 2px solid
      var(--theme-delegation-steps-choose-stake-pool-thumb-border-color);
    border-radius: 5.8px;
    border-style: dashed;

    .icon {
      margin-top: 24.5px;
      text-align: center;

      svg {
        height: 16px;

        path {
          stroke: var(
            --theme-delegation-steps-choose-stake-pool-checkmark-icon-color
          );
        }
      }
    }
  }

  &.selectedPoolBlock {
    background: var(--theme-staking-stake-pool-grey-color);
    border-radius: 4px;
    padding-top: 6px;

    .ticker {
      color: var(
        --theme-delegation-steps-choose-stake-pool-selected-ticker-color
      );
      font-family: var(--font-semibold);
      font-size: 14px;
      letter-spacing: -0.5px;
      line-height: 1.57;
      text-align: center;
      text-transform: uppercase;
    }

    .icon {
      margin-top: 10px;
      text-align: center;

      svg {
        vertical-align: top;
        width: 15.5px;

        path {
          stroke: var(
            --theme-delegation-steps-choose-stake-pool-selected-checkmark-icon-color
          );
        }
      }
    }

    &.retiring {
      background: var(
        --theme-staking-stake-pool-retirement-background-color
      ) !important;

      .icon {
        margin-top: 5px;

        svg {
          width: 20px;
          path {
            stroke: var(--theme-staking-stake-pool-retirement-background-color);
          }
        }
      }
    }

    &.alreadyDelegated {
      opacity: 0.3;
    }
  }
}
